<template>
  <div class="min-h-screen bg-gray-100">
    <!-- 顶部导航 固定 -->
        <div class="sticky top-0 z-10">
        <header class="bg-primary text-white py-4 px-6 text-center text-xl font-bold shadow-md">
          我的信息
        </header>
        </div>
    <!-- 个人信息卡片 -->
    <div class="bg-white shadow p-4 flex items-center">
      <img
        class="w-16 h-16 rounded-full object-cover"
        src="@/assets/images/537.jpg"
        alt="头像"
      />
      <div class="ml-4">
        <div class="text-xl font-semibold">吴萨奇</div>
        <div class="text-gray-500">手机号：537537</div>
      </div>
    </div>

    <!-- 功能入口 -->
    <div class="bg-white p-4 grid grid-cols-3 gap-4">
      <div
        class="flex flex-col items-center justify-center"
        @click="goToOrders"
      >
        <font-awesome-icon :icon="['fas', 'receipt']" class="text-blue-500 text-2xl" />
        <div class="mt-2 text-sm">我的订单</div>
      </div>

      <div class="flex flex-col items-center justify-center">
        <font-awesome-icon :icon="['fas', 'map-marker-alt']" class="text-green-500 text-2xl" />
        <div class="mt-2 text-sm">地址管理</div>
      </div>

      <div class="flex flex-col items-center justify-center">
        <font-awesome-icon :icon="['fas', 'ticket-alt']" class="text-red-500 text-2xl" />
        <div class="mt-2 text-sm">我的优惠券</div>
      </div>
    </div>
    <Footer class="fixed bottom-0 w-full" />
  </div>
</template>

<script setup>

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import Footer from '@/components/Footer.vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const goToOrders = () => {
  router.push('/orders')
}

</script>

<style scoped>
.bg-primary {
  background-color: #0097FF;
}
</style>
